<template>
	<view>
		<!-- tabs标签 -->
 		<u-tabs :list="list" @click="click" :scrollable="false" lineColor="#353535" lineWidth="50" lineHeight="1"></u-tabs>
		 <!-- 活动栏 -->
		 <view class="active" @click="detail" v-for="(item, index) in tasklist" :key="index">
			 <!-- 活动信息 -->
			 <view class="actMessage">
				 <text id="taskName">{{item.taskName}}</text>
				 <text class="message">时间:{{item.time}}</text>
				 <text class="message">地点:{{item.location}}</text>
				 <text class="message">人数:{{item.num}}</text>
			 </view>
			<!-- 活动图片及状态 -->
			 <view class="imgMessage">
				 <u--image :src="item.img" shape="circle" height="80" width="80"></u--image>
				 <text class="state">{{item.state}}</text>
			 </view>
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
                    name: '全部',
                }, {
                    name: '未开始',
                }, {
                    name: '进行中'
                }, {
                    name: '已结束'
                }],
				src: '/static/logo.png',
				tasklist: [{
					taskName: '打扫学苑路',				// 任务名
					time: '11.27 08:12—11.28 23.59',	// 时间
					location: '南区一食堂',				// 地点
					num: '1200',						// 人数
					state: '未开始',					// 活动状态
					img: '/static/logo.png'				// 活动封面
				}]
			}
		},
		methods: {
			click(item) {
                console.log('item', item);
            },
			detail() {
				uni.navigateTo({
					url: './activityDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
	// 活动栏
	.active {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		width: 86%;
		height: 300rpx;
		margin: 20px 7% 0 7%;
		border-radius: 20rpx;
        box-shadow: 0px 0px 8px #d5d5d6;
		// 活动信息
		.actMessage {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			width: 60%;
			height: 300rpx;
			padding: 20rpx;
			font-family: 'KaiTi','Times New Roman', Times, serif;
			#taskName {
				font-size: 36rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
			}
			.message {
				color: #666;
				font-size: 24rpx;
			}
		}
		// 活动图片
		.imgMessage {
			padding: 20rpx;
			text-align: center;
			.state {
				display: inline-block;
				margin-top: 40rpx;
			}
		}
	}
</style>
